<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="js/skin/default/layer.css" />-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HHijRvkp2YpsMBLWNKwOpgIUExI22hTG"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}			
			#map {
				width: 100%;
				height: 100%;
			}
			
			ul,
			li {
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div id="map"></div>

		<script type="text/javascript">
			$.ajax({
				type: "get",
				url: "./json/json.txt",
//				url: "http://10.190.3.6:8080/sendqureydata/getallstation",
				async: true,
				contentType: "application/x-www-form-urlencoded;charset=UTF-8",
				success: function(res) {
					res = JSON.parse(res);
					// 百度地图API功能
					var map = new BMap.Map("map");
					for(var key in res) {
						if(res[key].StationTypeId == 3) { // 超级站
							var imgURI = './img/super-stion.png'
						} else if(res[key].StationTypeId == 1) { // 城市站
							var imgURI = './img/NC-station.png'
						} else if(res[key].StationTypeId == 2) { // 农村站
							var imgURI = './img/countryside-station.png'
						} else if(res[key].StationTypeId == 6) { // 背景站
							var imgURI = './img/PC-station.png'
						} else if(res[key].StationTypeId == 4) { // 直管站
							var imgURI = './img/Figure-station.png'
						} else { // 其它
							var imgURI = 'http://developer.baidu.com/map/jsdemo/img/fox.gif'
						}

						addMarker(new BMap.Point(res[key].Longitude, res[key].Latitude), res[key], imgURI);
					}
					map.centerAndZoom("四川省", 8);
					map.enableScrollWheelZoom();
					// 编写自定义函数,创建标注
					function addMarker(point, ops, imgURI) {
						var marker = new BMap.Marker(point, {
							icon: new BMap.Icon(imgURI, new BMap.Size(28, 28))
						});
						marker.addEventListener('click', function(e) {
							layer.open({
								title: '提示',
								shade: 0.6,
								content: '<ul><li>' +
									"站点类型： " + ops.StationTypeName + '</li><li>' +
									"站点名称： " + ops.PositionName + '</li><li>' +
//									"站点类型Id： " + ops.StationTypeId + '</li><li>' +
									"站点纬度： " + ops.Latitude + '</li><li>' +
									"站点经度： " + ops.Longitude + '</li></ul>'
							});
							//							alert("站点类型： " + ops.StationTypeName);
							//							alert("站点名称： " + ops.PositionName);
							//							alert("站点类型Id： " + ops.StationTypeId);
							//							alert("站点纬度： " + ops.Latitude);
							//							alert("站点经度： " + ops.Longitude);
						})
						map.addOverlay(marker);
					}
				}
			});
		</script>
	</body>

</html>